<template>
    <div
        class="active-area"
        :class="{'hot-bg': extClass == 'hot', 'hot-store-bg': extClass == 'hot-store'}"
    >
        <div class="header">
            <slot name="header"></slot>
        </div>
        <div :class="isStoreList ? 'store-main' : 'main'">
            <div class="goods-contain row" ref="goodsContain" v-if="!isStoreList" style="touch-action: pan-y">
                <div class="goods-wrap row" ref="goodsWrap">
                    <div
                        class="goods-item"
                        v-for="(item, index) in lists"
                        :key="index"
                        @click="goGoodsDetail(item.id, item.shop_id)"
                    >
                        <div class="goods-rank-box" v-if="index<=3 && extClass == 'hot'">
                            <div class="rank-img">
                                <img :src="require('@A/images/No.' + index + '.png')" />
                            </div>
                            <div class="goods-rank xxs row-center">{{index + 1}}</div>
                        </div>
                        <div class="goods-img mb5">
                            <van-image width="100%" height="100%" lazy-load radius="6px" :src="item.image" />
                        </div>
                        <div class="goods-name mt5 sm one-txt-cut">{{item.name}}</div>
                        <div class="price">
                            <div>
                                <price-slice
                                    :price="item.price"
                                    firstClass="lg"
                                    :showSubscript="true"
                                    subScriptClass="xxs"
                                    :color="primaryColor"
                                    secondClass="xxs"
                                    weight="bold"
                                ></price-slice>
                            </div>
                            <div>
                                <price-slice
                                    color="#999999"
                                    :price="item.min_price || item.market_price"
                                    firstClass="xxs"
                                    secondClass="xxs"
                                    subScriptClass="xxs"
                                    :showSubscript="true"
                                    :lineThrough="true"
                                    class="ml5"
                                ></price-slice>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="store-contain" ref="storeContain" v-else>
                <div class="store-box column wrap">
                    <div
                        class="store-item row-between mt10"
                        v-for="(item, index) in lists"
                        :key="index"
                         @click="toStore(item.id)"
                    >
                        <div class="row">
                            <div class="store-img">
                                <van-image width="100%" height="100%" lazy-load radius="3px" :src="item.image" />
                            </div>
                            <div class="ml10">
                                <div class="md">{{item.name}}</div>
                                <div
                                    class="primary xs br60 row-center mt5 sale-container"
                                >销量 {{item.sales_sum}}</div>
                            </div>
                        </div>
                        <div
                            class="primary br60 sm row-center"
                            :style="'border:1px solid' + primaryColor +';width: 72px;height: 24px'"
                        >进店看看</div>
                    </div>
                </div>
            </div>
            <!-- <div class="row-center mt10">
                <progress-bar
                    :progressBarColor="progressBarColor"
                    :left="progressPer"
                    v-show="lists.length >= 3 && !isStoreList"
                />
            </div> -->
        </div>
    </div>
</template>

<script>
import ProgressBar from "@C/ProgressBar";
import BScroll from "@better-scroll/core";

export default {
    name: "activeArea",
    props: {
        extClass: {
            type: String,
            default: "",
        },
        isStoreList: {
            type: Boolean,
            default: false,
        },
        progressBarColor: {
            type: String,
            default: "#01B55B",
        },
        lists: {
            type: Array,
            default: () => [],
        },
    },
    watch: {
        lists: function (value) {
            let { goodsContain, goodsWrap } = this.$refs;
            this.$nextTick(() => {
                this.scrollContainerBar = new BScroll(goodsContain, {
                    scrollX: true,
                    eventPassthrough: "vertical",
                    probeType: 3,
                    bounce: true,
                });
                if (goodsContain) {
                    this.goodsContainWidth = goodsContain.clientWidth;
                    this.goodsWrapWidth = goodsWrap.clientWidth;
                }
                this.containerWidth = goodsContain.width
            }, 1000);
        },
        scrollContainerBar: function (value) {
            this.scrollContainerBar.on(
                "scroll",
                (pos) => {
                    this.progressPer =
                        (Math.abs(pos.x) /
                            (this.goodsWrapWidth - this.goodsContainWidth)) *
                        100;
                },
                this
            );
        },
    },
    data() {
        return {
            progressPer: 0,
            scrollContainerBar: null,
            goodsContainWidth: 0,
            goodsWrapWidth: 0,
        };
    },
    components: {
        "progress-bar": ProgressBar,
    },
    created() {
    },
    mounted() {
        let { goodsContain, goodsWrap } = this.$refs;
        this.$nextTick(() => {
            this.scrollContainerBar = new BScroll(goodsContain, {
                scrollX: true,
                eventPassthrough: "vertical",
                probeType: 3,
                bounce: true,
            });
            if (goodsContain) {
                this.goodsContainWidth = goodsContain.clientWidth;
                this.goodsWrapWidth = goodsWrap.clientWidth;
            }
            this.containerWidth = goodsContain.width
        }, 1000);
    },
    methods: {
        toStore(id) {
            this.$router.push({
                name: "storeDetail",
                query: {
                    id: id,
                },
            });
        },
        goGoodsDetail(id) {
            this.$router.push({
                name: "goodsDetail",
                query: {
                    id: id,
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>

.hot-bg {
    border-radius: 10px;
    background-image: url(../../assets/images/home_hot_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.hot-store-bg {
    border-radius: 10px;
    background-image: url();
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.active-area {
    background-repeat: no-repeat;

    .main {
        position: relative;
        box-sizing: border-box;
        padding: 0px 0 10px;
        border-radius: 10px;
        .goods-contain {
            height: 170px;
            overflow: hidden;
            .goods-wrap {
                .goods-item {
                    width: 100px;
                    margin-left: 10px;
                    background-color: white;
                    border-radius: 5px;
                    position: relative;
                    .goods-rank-box {
                        position: absolute;
                        left: 0px;
                        top: 0;
                        z-index: 2;
                        .rank-img {
                            position: absolute;
                            width: 25px;
                            height: 27px;
                            left: 3px;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .goods-rank {
                            position: absolute;
                            width: 25px;
                            height: 23px;
                            padding-top: 4px;
                            line-height: 30px;
                            left: 3px;
                            font-weight: 600;
                        }
                    }
                    .goods-img {
                        width: 100px;
                        height: 100px;
                    }
                    .goods-name {
                        margin-left: 4px;
                        margin-right: 4px;
                        line-height: 16px;
                    }
                    .price {
                        margin: 3px 4px 4px;
                        text-align: left;
                    }
                    &:last-of-type {
                        margin-right: 10px;
                    }
                }
            }
        }
    }
    .store-main {
        position: relative;
        box-sizing: border-box;
        padding: 5px 0;
        border-radius: 20px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
        .store-contain {
          overflow: hidden;
          max-height: 300px;
          .store-box {
            .store-item {
              padding: 7px 12px;
              .store-img {
                  height: 50px;
                  width: 50px;
              }
              .sale-container {
                padding: 2px 13px 2px 8px;
                background-color: #FFEFF0;
                display: inline-block;
              }
            }
          }
        }
    }
}
</style>